<template>
    <div v-loading="loading">
        <el-form :model="form" :rules="rules" ref="form" label-width="100px" label-position="top"
                 class="public-form">
            <el-form-item label="账号" prop="username">
                <el-input v-model="form.username"   placeholder="账号"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="form.password" type='password'  placeholder="密码"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="onSubmit('form')" :disabled='loading'>创建</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import api from '@/api'
    // require styles
    export default {
        name: 'addSystem',
        data() {
            return {
                loading: false,
                form: {
                    username:'',
                    password:'',
                },
                rules: {
                    username: [{required: true, trigger: 'blur', message: '请输入账号'}],
                    password: [{required: true, trigger: 'blur', message: '请输入密码'}],
                },
            }
        },
        created() {
           
        },
        methods: {
            onSubmit(form) {
                let _this = this;
                this.$refs[form].validate((valid) => {
                    if (valid) {
                        this.loading = true
                        setTimeout(() => {
                            this.loading = false
                        }, 5000);
                        api.addSystem(this.form).then(res => {
                            if (res.code == 200) {
                                this.$message({
                                  message: '子账号创建完成',
                                  type: 'success',
                                  duration:2000
                                });
                                setTimeout(()=>{
                                    location.reload()
                                },2000)
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                })
            }
        }
    }
</script>


